<template>
	<view class="container" :style="{height:`calc(100vh - ${height}px)`}">
		<Header title="中国【西部】健康食品博览会"></Header>
		<view class="wapper">
			<div class="header">
				<div class="left">
					<div class="avatar">
						<image :src="user.HeaderUrl? user.HeaderUrl: '../../static/icons/avatar.png'" mode="widthFix">
					</div>
					<div class="name">
						<div class="text1">{{user.UserName?user.UserName : ''}}</div>
						<div class="text2 blue" v-if="user.IsRenZheng" @click="toCompany">
							{{user.ZhanShangInfo.ZhangShangName}}
						</div>
						<div class="text2" v-if="user.IsRenZheng">{{user.ZhanShangInfo.ZhangShangSeat}}</div>
					</div>
				</div>
				<!-- 		<div class="right" v-if="user.IsRenZheng">
					<div class="place">
						<div class="text1">{{user.ZhanShangInfo.ZhangShangName}}</div>
						<div class="text2">{{user.ZhanShangInfo.ZhangShangSeat}}</div>
						<div class="text3">{{user.ZhanShangInfo.ZhangShangID}}</div>
					</div>
				</div> -->
			</div>
			<div class="cells">
				<div class="cell" @click="toYuyue">
					<div class="left">
						<div class="icon">
							<image src="../../static/icons/my1.png" mode="widthFix"></image>
						</div>
						<div class="label">
							我的预约
						</div>
					</div>
					<div class="right">
						<image src="../../static/icons/right.png" mode="widthFix"></image>
					</div>
				</div>
				<!-- 		<div class="cell" @click="toUpload" v-if="user.IsRenZheng">
					<div class="left">
						<div class="icon">
							<image src="../../static/icons/edit.png" mode="widthFix"></image>
						</div>
						<div class="label">
							上传展台照片
						</div>
					</div>
					<div class="right">
						<image src="../../static/icons/right.png" mode="widthFix"></image>
					</div>
				</div> -->
				<div class="cell" v-if="!user.IsRenZheng" @click="toRenZheng">
					<div class="left">
						<div class="icon">
							<image src="../../static/icons/renzheng.png" mode="widthFix"></image>
						</div>
						<div class="label">
							展商认证
						</div>
					</div>
					<div class="right">
						<image src="../../static/icons/right.png" mode="widthFix"></image>
					</div>
				</div>
				<!-- <div class="cell"  @click="toPic"> -->
				<div class="cell" v-if="user.IsRenZheng" @click="toPic">
					<div class="left">
						<div class="icon">
							<image src="../../static/icons/my2.png" mode="widthFix"></image>
						</div>
						<div class="label">
							展台照片
						</div>
					</div>
					<div class="right">
						<image src="../../static/icons/right.png" mode="widthFix"></image>
					</div>
				</div>
				<div class="cell" v-if="user.IsRenZheng" @click="choseImage">
					<div class="left">
						<div class="icon">
							<image src="../../static/icons/my6.png" mode="widthFix"></image>
						</div>
						<div class="label">
							更新企业首页图片
						</div>
					</div>
					<div class="right">
						<image src="../../static/icons/right.png" mode="widthFix"></image>
					</div>
				</div>
				<div class="cell" v-if="user.IsRenZheng" @click="toContent">
					<div class="left">
						<div class="icon">
							<image src="../../static/icons/my5.png" mode="widthFix"></image>
						</div>
						<div class="label">
							更新企业首页简介
						</div>
					</div>
					<div class="right">
						<image src="../../static/icons/right.png" mode="widthFix"></image>
					</div>
				</div>
				<div class="cell" @click="toMyComment">
					<div class="left">
						<div class="icon">
							<image src="../../static/icons/my3.png" mode="widthFix"></image>
						</div>
						<div class="label">
							我的留言
						</div>
					</div>
					<div class="right">
						<image src="../../static/icons/right.png" mode="widthFix"></image>
					</div>
				</div>
				<!-- 	<div class="cell" @click="clear">
					<div class="left">
						<div class="icon">
							<image src="../../static/icons/my4.png" mode="widthFix"></image>
						</div>
						<div class="label">
							清除缓存
						</div>
					</div>
					<div class="right">
						<image src="../../static/icons/right.png" mode="widthFix"></image>
					</div>
				</div> -->
			</div>
			<u-popup :show="show" mode="center" closeable @close="close" width="">
				<div class="popcontainer">
					<div class="title">展商认证</div>
					<div class="input">
						<u-input placeholder="请输入认证码" v-model="code"></u-input>
					</div>
					<div class="btns">
						<u-button type="info" text="取消" border @click="show = false"></u-button>
						<u-button type="primary" text="提交" border style="margin-left:20rpx" :loading="loading"
							@click="submit"></u-button>
					</div>
				</div>
			</u-popup>
		</view>

	</view>
</template>

<script>
	import Header from '@/components/haeder.vue'
	import banner1 from '@/static/banner/banner1.png'
	export default {
		components: {
			Header
		},
		data() {
			return {
				height: 0,
				user: {
					IsRenZheng: false,
					HeaderUrl: '',
					UserName: '',
					ZhanShangInfo: {
						ZhangShangSeat: '',
						ZhangShangID: ''
					}
				},
				show: false,
				code: '',
				loading: false
			}
		},
		methods: {
			toRenZheng() {
				this.show = true
				this.code = ''
			},
			toPic() {
				uni.navigateTo({
					url: './photo'
				})
			},
			toUpload() {
				uni.navigateTo({
					url: './upload'
				})
			},
			toCompany() {
				uni.navigateTo({
					url: '/pages/navs/company?data=' + encodeURIComponent(JSON.stringify({
						ZhangShangID: this.user.ZhanShangInfo.ZhangShangID
					}))
				})
			},
			toYuyue() {
				uni.navigateTo({
					url: './yuyue'
				})
			},
			toMyComment() {
				uni.navigateTo({
					url: './myComment'
				})
			},
			close() {
				this.show = false
			},
			clear() {
				uni.showLoading()
				uni.clearStorageSync()
				setTimeout(() => {
					uni.hideLoading()
					window.location.reload()
				}, 1000)
			},
			async submit() {
				this.loading = true
				let res = await this.$api.renzheng({
					openid: this.user.OpenID,
					keywords: this.code
				})
				this.loading = false
				uni.$u.toast(res.Message)
				if (res.Status == 0) {
					this.show = false
					setTimeout(() => {
						window.location.reload()
					}, 500)
				}
			},
			choseImage(){
				let that = this
				uni.chooseImage({
					count:1,
					async success(res){
						let files = res.tempFiles.map((v)=>{
							return {
								name:v.name,
								file:v,
								uri:v.url
							}
						})
						let params = {
							OpenId:that.user.OpenID,
							ChangShangId: that.user.ZhanShangInfo.ZhangShangID,
							PictureList:files.map((v)=>{
								let index = v.name.lastIndexOf('.')
								let name = v.name.slice(0, index)
								return {
									PictureName: name,
									FileName: v.name
								}
							})
						}
						await that.uploadFilePromise(params, files)
						
						
					}
				})
			},
			toContent(){
				uni.navigateTo({
					url:'./content?id='+this.user.ZhanShangInfo.ZhangShangID
				})
			},
			uploadFilePromise(params, files) {
				let that = this
				uni.uploadFile({
					url: that.baseUrl + '/API/User/PostUploadZhanShangLogo', // 仅为示例，非真实的接口地址
					files,
					name: 'file',
					formData: {
						PicturesJson: JSON.stringify(params)
					},
					success: ({data}) => {
						that.loading = false
						let res = JSON.parse(data)
						if (res.Status == 0) {
							uni.$u.toast('上传成功!')
						}
					}
				})
			}
		},
		mounted() {
			this.user = uni.getStorageSync('user') || {
				isRenZheng: false,
				HeaderUrl: '',
				UserName: '',
				ZhanShangInfo: {
					ZhangShangSeat: '',
					ZhangShangID: ''
				}

			}
		},
		created() {
			let app = uni.getSystemInfoSync();
			this.height = app.windowBottom
		}
	}
</script>

<style scoped lang="scss">
	.popcontainer {
		padding: 20rpx 40rpx;

		.title {
			font-size: 32rpx;
			text-align: center;
			margin: 20rpx 0;
		}

		.input {}

		.btns {
			margin-top: 40rpx;
			display: flex;

		}
	}

	.container {
		width: 100vw;
		overflow: auto;
		display: flex;
		flex-direction: column;

		.wapper {
			flex: 1;
			background: #f2f2f2;
			padding: 40rpx;
			z-index: 100;
			margin-top: -280rpx;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;

			.header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.left {
					display: flex;
					align-items: center;

					.avatar {
						margin-right: 20rpx;

						image {
							width: 200rpx;
							height: 200rpx;
							border-radius: 50%;

						}
					}

					.name {
						.text1 {
							font-size: 38rpx;
							font-weight: 800;
							color: #454545;
						}

						.text2 {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;

							color: #454545;
						}

						.blue {
							color: #0b6cc1;
						}

						.text3 {
							font-size: 28rpx;
							font-family: PingFang SC;
							margin-top: 10rpx;
							font-weight: 500;
							color: #454545;
						}
					}
				}

				.right {
					text-align: right;

					.text1 {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #0B6CC1;
					}

					.text2,
					.text3 {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #454545;
					}
				}
			}

			.cells {
				// display: flex;
				// justify-content: space-between;
				margin-top: 40rpx;

				.cell {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 10rpx 20rpx;
					align-items: center;
					border-bottom: 1px solid #ccc;

					.left {
						display: flex;
						align-items: flex-start;

						.icon {
							margin-right: 20rpx;

							image {
								width: 35rpx;
							}
						}

						.label {
							font-size: 34rpx;
						}
					}

					.right {
						image {
							width: 40rpx;
							object-fit: cover;
						}
					}
				}
			}
		}
	}
</style>